<template>
<div class="MainSearch">
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true" class="demo-form-inline messageInput" label-width="70px" label-position="left">
                    <el-form-item label="主体名称">
                        <el-input v-model="searchData.subjectName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item class="status" label="主体类型">
                        <el-select placeholder="请选择(个体户、合作户、企业)" v-model="searchData.subjectType">
                            <el-option label="全部" :value="0"> </el-option>
                            <el-option v-for="item in type" :key="item.value" :label="item.lable" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <!-- <el-form-item label="地址" class="form_right">
                        <el-input v-model="searchData.subjectAddr" placeholder="请输入"></el-input>
                    </el-form-item> -->
                    <!-- 
                    <el-form-item label="联系人">
                        <el-input v-model="searchData.subjectLinkman" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="身份证号">
                        <el-input v-model="searchData.subjectCard" placeholder="请输入"></el-input>
                    </el-form-item> -->
                    <el-form-item label="行业">
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(city,index) in cities" :label="city.value" :key="index">{{
                  city.label
                }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="选择镇街">
                        <el-select placeholder="选择镇街" v-model="searchData.subjectTownId" @change="selectOptionsChildren">
                            <el-option label="全部" :value="0"> </el-option>
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择村居">
                        <el-select placeholder="选择村居" v-model="searchData.subjectVillageId">
                            <el-option label="全部" :value="0"> </el-option>
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-from-item>
                        <el-button type="primary" @click="searchSubject()">查询</el-button>
                    </el-from-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-card class="el-card" shadow="never">
                <el-table :data="SubjectInfoList" style="width: 100%">
                    <el-table-column prop="subjectName" label="主体名称" width="130">
                    </el-table-column>
                    <el-table-column prop="subjectLinkman" label="联系人" width="130">
                    </el-table-column>
                    <el-table-column prop="subjectAddr" label="主体地址" width="160">
                    </el-table-column>
                    <el-table-column prop="subjectTele" label="电话" width="130">
                    </el-table-column>
                    <el-table-column prop="landSubjectRs.length" label="地块数量" width="100">
                    </el-table-column>
                    <el-table-column prop="subjectBase" label="基地"> </el-table-column>
                    <el-table-column label="操作" fixed="right" width="50">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bottom">
                    <el-pagination background @size-change="handleSizeChange" @current-change="currentchange" :current-page="paging.pageNum" :page-sizes="[5, 10, 20, 30, 40]" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <el-dialog append-to-body title="主体详情" :visible.sync="innerVisible" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-card>
            <Look :editor="true" :subjectFormRow="subjectFormRow"></Look>
        </el-card>
        <el-button @click="innerVisible = false" type="danger" class="btn-block" style="margin-top: 15px">关闭窗口</el-button>
    </el-dialog>
</div>
</template>

<script>
import Look from "@/views/DataResource/ProductionBase/Look/Look.vue";
const cityOptions = [{
    label: "种植业",
    value: 'SS2'
}, {
    label: "渔业",
    value: 'SS1'
}];
export default {
    name: "MainSearch",
    components: {
        Look,
    },
    data() {
        return {
            checkAll: false,
            cities: cityOptions,
            checkedCities: ['SS1'],
            isIndeterminate: true,
            innerVisible: false,
            townIndex: null,
            editor: true,
            subjectFormRow: {},
            DetailsDialogFormVisible: false,
            AddDialogFormVisible: false,
            search: {
                planName: "",
                value: "",
            },
            form: {},
            typeClass: "个体户",
            formData: {
                pageNum: 1,
                pageSize: 5,
                subjectVillageId: "",
            },
            searchData: {
            
            },
            params: {
                pageNumber: 1,
                pageSize: 5,
            },
            options: [],
            optionsChildren: [],
            type: [{
                    value: "P0201",
                    lable: "个体户",
                },
                {
                    value: "P0202",
                    lable: "合作户",
                },
                {
                    value: "P0203",
                    lable: "企业",
                },
            ],
            SubjectInfoList: [],
            paging: {},
        };
    },
    created() {
        if(localStorage.getItem('SYS_TYPE') === 'SS1'){
            this.checkedCities = ['SS1']
        }else{
            this.checkedCities = ['SS2']
        }
        this.searchSubject();
        this.selectData();
    },
    computed: {
        options2() {
            if (
                this.searchData.subjectTownId != 0 &&
                typeof this.townIndex === "number"
            ) {
                return this.options[this.townIndex].children;
            } else {
                return [];
            }
        },
    },
    methods: {
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            if (checkedCount) {
                this.$set(this.searchData, "checkedCities", value);
            } else {
                delete this.searchData.checkedCities;
            }

            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.cities.length;
        },
        selectOptionsChildren(opid) {
            if (opid !== 0) {
                this.options.forEach((item, index) => {
                    if (item.value === opid) {
                        console.log(item.label, index);
                        this.townIndex = index;
                    }
                });
            } else {
                this.townIndex = 0;
            }
            this.$set(this.searchData, "subjectVillageId", 0);
        },
        selectData() {
            var json = JSON.parse(
                localStorage.getItem("getTreeData/setAsyncVillageData")
            );
            this.options = json[0].children[0].children;
        },
        statusChange(item) {
            console.log(item);
        },
        editIndividual(res) {
            this.DetailsDialogFormVisible = res.visible;
            if (res.code === 200) {
                this.getSubjectInfoList();
            }
        },
        addIndividual(res) {
            console.log(res);
            this.AddDialogFormVisible = res.visible;
            if (res.code === 200) {
                this.getSubjectInfoList();
            }
        },
        onSearch() {},
        handleClick(row) {
            this.subjectFormRow = row;
            this.innerVisible = true;
        },
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
            this.getSubjectInfoList(this.params.pageNumber, this.params.pageSize);
        },
        currentchange(pageNumber) {
            this.params.pageNumber = pageNumber;
            this.getSubjectInfoList(this.params.pageNumber, this.params.pageSize);
        },
        getSubjectInfoList(pageNumber = 1, pageSize = 5) {
            this.$fishing.getSubjectInfoList(pageNumber, pageSize).then((res) => {
                this.SubjectInfoList = res.data.list;
                delete res.data.list;
                this.paging = res.data;
            });
        },
        searchSubject() {
            if (this.checkedCities.length) {
                this.$set(this.searchData, "checkedCities", this.checkedCities);
            }

            if (Object.keys(this.searchData).length === 0) {
                this.$message({
                    message: "请至少输入一个查询条件",
                    type: "warning",
                });
                return false;
            }

            // console.log(this.searchData);
            if (this.searchData.subjectTownId === 0) {
                delete this.searchData.subjectTownId;
            }
            if (this.searchData.subjectVillageId === 0) {
                delete this.searchData.subjectVillageId;
            }

            if (this.searchData.subjectType === 0) {
                delete this.searchData.subjectType;
            }

            if(Object.keys(this.searchData).length){
                this.$axios
                .get("rbac/data/subject/getSubjectInfoList", {
                    params: {
                        "subjectInfo.subjectName": this.searchData.subjectName,
                        "subjectInfo.subjectType": this.searchData.subjectType,
                        "subjectInfo.subjectTownId": this.searchData.subjectTownId,
                        "subjectInfo.subjectVillageId": this.searchData.subjectVillageId,
                        "subjectInfo.subjectAddr": this.searchData.subjectAddr,
                        "subjectInfo.subjectLinkman": this.searchData.subjectLinkman,
                        // "subjectIndustryList": this.searchData.checkedCities.join(',')
                        'systemTypeList': this.searchData.checkedCities.join(',')
                            // subjectIndustryList: tradeCurrentValue
			            	// systemTypeList:tradeCurrentValue

                    },
                }).then((res) => {
                    console.log(res.data);
                    this.SubjectInfoList = res.data.list;
                    this.paging = res.data;
                });
            }else{
                this.getSubjectInfoList()
            }
            
        },
    },
};
</script>

<style lang="scss">
.MainSearch {
    .form {
        padding: 15px 10px;
    }

    .el-card {
        width: 98%;
        margin: 15px auto 0;

        .bottom {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
        }

        .flex {
            display: flex;
            justify-content: flex-start;
        }
    }
}
</style>
